<%--
  ~ Copyright (c) 2018. QDU 2015 Java1 Team CompilationError
  --%>

<%--
  Created by IntelliJ IDEA.
  User: inkux
  Date: 2018/5/22
  Time: 11:02
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<script>

	$(document).ready(function () {
		$("#control_panel_button_div").mouseover(function () {
			$("#control_panel_menu_div").slideDown(200);
		});
		$("#control_panel_event_div").mouseleave(function () {
			$("#control_panel_menu_div").slideUp(200)
		});
		$("#change_password_form").validate({
			rules: {
				cfm_password: {equalTo: "#new_password"},
				new_password: {
					required: true,
					rangelength: [6, 12]
				}
			},
			messages: {
				cfm_password: "Password does not match"
			},
			submitHandler: function (form) {
				$("#password").val(getEncodedPassword($("#password").val()));
				$("#new_password").val(getEncodedPassword($("#new_password").val()));
				$(form).ajaxSubmit({
					url: "${pageContext.request.contextPath}/changepassword",
					type: "post",
					dataType: "json",
					success: function (data) {
						if (data.status == "ok") {
							showMessagePopup("Info", "Your Password Has Been Changed.", function () {
								hideChangePasswordFrame();
							});
						} else {
							showMessagePopup("Error", "Invalid Password");
						}
					},
					error: function (jqHXR, textStatus, error) {
						showErrorPopup("Error", "Could not connect to server");
					}
				});
			}
		});
	});

	function showChangePasswordFrame() {
		$("#change_password_div").slideDown(200);
	}

	function hideChangePasswordFrame() {
		$("#change_password_div").slideUp(200);
	}

	function changePasswordOnClick() {
		$.ajax({
			url: "${pageContext.request.contextPath}/logincheck",
			target: null,
			type: "get",
			dataType: "json",
			success: function (data) {
				if (data.login == true) {
					showChangePasswordFrame();
				} else {
					showErrorPopup("Error", "Please Login First", function () {
						window.location = "${pageContext.request.contextPath}/login";
					});
				}
			},

			error: function (jqHXR, textStatus, error) {
				showErrorPopup("Error", "Could not connect to server");
			}
		});
	}

	function invokeQQ() {
		window.open("tencent://message/?uin=920402030");
	}
</script>
<style>
	#control_panel_button_div {
		position: absolute;
		top: 40px;
		right: 35px;
		height: 35px;
		cursor: pointer;
	}

	#control_panel_menu_div {
		position: absolute;
		top: 75px;
		right: 10px;
		cursor: pointer;
		padding: 10px;
		background-color: #282a2d;
		opacity: 0.9;
		border-radius: 5px;
		z-index: 500;
	}

	#change_password_div {
		position: fixed;
		top: 200px;
		left: 31%;
		background-color: #8c9eff;
		-webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 50);
		-moz-box-shadow: 2px 2px 2px rgba(0, 0, 0, 50);
		box-shadow: 1px 1px 2px rgba(0, 0, 0, 50);
		z-index: 500;
	}

	.clickable_link {
		cursor: pointer;
		/*text-decoration: underline;*/
		text-decoration: none;
		/*color:rgb(239, 244, 250);*/
	}

	#clickable_link_id {
		cursor: pointer;
		/*text-decoration: underline;*/
		text-decoration: none;
		/*color:rgb(239, 244, 250);*/
		color: #c5cae9;
		font-size: 22px;
		height: 100%;
		margin: 0;
		padding: 0;
	}

	#control_panel_menu_div ul li a {
		cursor: pointer;
		text-decoration: none;
		font-size: 16px;
		color: darkgrey;
	}

	#control_panel_menu_div ul li a:hover {
		color: white;
		text-decoration: underline;
	}

	#Click_close {
		font-weight: 500;
		font-size: 22px;
		position: absolute;
		right: 7px;
		top: 5px;
	}

	#Click_close:hover {
		color: white;
		transform: scale(1.25);
		transition: .25s;
	}

	#Pc_title {
		margin: 20px 188px 20px 188px;
		word-break: keep-all;
		white-space: nowrap;
		font-size: 34px;
		text-align: center;
		font-weight: 500;
		color: #636363;

	}

	#Pc_table {

		margin: auto;
		background-color: #fafafa;
		box-shadow: rgba(0, 0, 0, 0.14902) 0px 1px 1px 2px, rgba(0, 0, 0, 0.09804) 0px 1px 2px 0px;
		padding: 3em 2em 0.5em 2em;
		width: 600px;
	}

	.label_content {
		color: #999;
		font-size: 18px;
		font-weight: normal;
		position: absolute;
		pointer-events: none;
		left: 5px;
		top: -5px;
		width: 500px;

	}

	.group {
		position: relative;
		margin-bottom: 45px;
	}

	.pwd_input {
		-webkit-appearance: none;
		display: block;
		background-color: #fafafa;
		font-size: 22px;
		border: none;
		border-bottom: 1px solid #757575;
		text-align: center;
		height: 37px;
		width: 550px;
		line-height: 37px;
		color: #636363;
		padding: 5px;
		outline: 0;
	}

	.pwd_input:focus ~ .label_content {
		top: -20px;
		transform: scale(.75);
		left: -60px;
		color: #4a89dc;
		transition: 0.10s ease-in;
	}

	#button_submit {
		position: relative;
		display: inline-block;
		padding: 12px 24px;
		margin: .3em 0 1em 0;
		width: 100%;
		vertical-align: middle;
		color: #fff;
		font-size: 16px;
		line-height: 20px;
		-webkit-font-smoothing: antialiased;
		text-align: center;
		letter-spacing: 1px;
		border: 0;
		border-bottom: 2px solid #3160B6;
		cursor: pointer;
		transition: all 0.15s ease;
		background-color: #4a89dc;
		border-radius: 5px;
	}

	#button_submit:hover {
		background: #357bd8;
	}
</style>
<div id="control_panel_event_div">
	<div class="" id="control_panel_button_div">
		<a id="clickable_link_id">Control Panel</a>
	</div>
	<div class="" id="control_panel_menu_div" hidden>
		<ul>
			<li><a onclick="changePasswordOnClick()">Change Password</a></li>
			<li><a href="#" onclick="invokeQQ()">Contact Admin</a></li>
			<li><a href="${pageContext.request.contextPath}/logout">Logout</a></li>
		</ul>
	</div>
</div>
<div class="" id="change_password_div" hidden>
	<div class="" id="change_password_div_header">
		<a class="clickable_link" id="Click_close" onclick="hideChangePasswordFrame()">X</a>
	</div>
	<h1 id="Pc_title">Password Change</h1>
	<div id="Pc_table">
		<form id="change_password_form" action="">
			<table>
			<tr>
				<td>
					<div class="group">
						<input id="password" name="password" class="pwd_input" type="password">
						<label class="label_content">Old Password</label>
					</div>
				</td>

			</tr>
			<tr>
				<td>
					<div class="group">
						<input id="new_password" name="new_password" class="pwd_input" type="password">
						<label class="label_content">New Password</label>
					</div>
				</td>

			</tr>
			<tr>
				<td>
					<div class="group">
						<input class="pwd_input" name="cfm_password" type="password">
						<label class="label_content">Confirm Password</label>
					</div>
				</td>
			</tr>
			</table>
			<input id="button_submit" type="submit">
		</form>
	</div>
</div>